<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
    <title>Display Corpus</title>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all"/>
    <style>
        body{margin: 10px;}
    </style>
</head>
<body>
    <div class="searchTable">
        搜索内容：
        <div class="layui-inline">
            <input class="layui-input" name="search" id="search" autocomplete="off"/>
        </div>
        <button class="layui-btn" data-type="reload">搜索</button>
    </div>
    <table class="layui-table" id="list" lay-filter="project"></table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail">查看</a>
        <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
    </script>
    <!--<script src="//res.layui.com/layui/dist/layui.js?t=1508154136729"></script>-->
    <script type="text/javascript" th:src="@{/lib/layui/layui.js}"/>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
        var basePath = /*[[${#httpServletRequest.getScheme() + "://" + #httpServletRequest.getServerName() + ":" + #httpServletRequest.getServerPort() + #httpServletRequest.getContextPath()}]]*/;
        layui.use(['laydate', 'laypage', 'layer', 'table', 'element'], function(){
            var laydate = layui.laydate //日期
                ,laypage = layui.laypage //分页
                layer = layui.layer //弹层
                ,table = layui.table //表格
                ,element = layui.element; //元素操作
            //方法级渲染
            table.render({
                elem: '#list'
                ,url: basePath+'/project/query'
                ,cols: [[{checkbox: true, fixed: true}
                ,{field:'id', width:55, sort: true, fixed: true, title: 'ID'}
                ,{field:'key', width:90, title: '问题编号'}
                ,{field:'name', width:120, title: '项目名称' }
                ,{field:'summary', width:290, title: '摘要' }
                ,{field:'description', width:340, sort: true,title: '问题描述'}
                ,{field:'reporter', width:78, sort: true, title: '报告人'}
                ,{field:'supporter', width:100, sort: true,title: '支持人'}
                ,{field:'flag', width:78, sort: true,title: '问题组'}
                ,{fixed: 'right', width:160, align:'center', toolbar: '#barDemo', title: '相关操作'}
                ]]
                ,id: 'testProject'
                ,page: true
                ,height: 780
            });

            var $ = layui.$, active = {
                reload: function(){
                    var search = $('#search');
                    table.reload('testProject', {
                        where: {
                            key: {
                                search: search.val()
                            }
                        }
                    });
                }
            };
            $('.searchTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });

            //监听工具条
            table.on('tool(project)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                var data = obj.data //获得当前行数据
                    ,layEvent = obj.event; //获得 lay-event 对应的值
                if(layEvent === 'detail'){
                    layer.msg('查看操作');
                    location.href = basePath+"/project/detail?pid="+data.id;
                } else if(layEvent === 'del'){
                    //get the id
                    if(data.hasOwnProperty('id')){
                        layer.confirm('删除该行?', function(index){
                            layui.jquery.ajax({
                                contentType:"application/json;charset=utf-8",
                                url : basePath+"/project/del?pid="+data.id,
                                type : "post",
                                dataType : "json",
                                success : function(data) {
                                    if(data.hasOwnProperty('code')){
                                        console.log(data);
                                        if(data.code==0){
                                            obj.del(); //删除对应行（tr）的DOM结构
                                            layer.close(index);
                                        }else {
                                            layer.msg(data.msg);
                                        }
                                    }
                                },
                                error:function(){ }
                            });
                        });
                    }
                } else if(layEvent === 'edit'){
                    layer.msg('编辑操作');
                    location.href = basePath+"/project/edit?pid="+data.id;
                }
            });
            //分页
            laypage.render({elem: 'pageDemo' //分页容器的id
                ,count: 100 //总页数
                ,skin: '#1E9FFF' //自定义选中色值
                //,skip: true //开启跳页
                ,jump: function(obj, first){
                    if(!first){
                        layer.msg('第'+ obj.curr +'页');
                    }
                }
            });
        });
        /*]]>*/
    </script>
</body>
</html>